<template>
  <div id="app">
    <router-view :toggleLoading="toggleLoading" v-if="!loading" />
    <div id="leafContainer" :style="{opacity: !loading ? 1 : 0}"></div>
    <!-- 通用加载 -->
    <div class="common-loading" v-if="loading">
      <div class="loader">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
      </div>
      <div class="loader-title">正在加载 {{percent}}%</div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      loading: false,
      percent: 0,
    };
  },
  mounted() {
    const p = this;
    // 图片预加载
    const images = [
      /* '/static/img/award-1.jpg',
      '/static/img/award-box.png',
      '/static/img/bottom-flower.png',
      '/static/img/center-canvas-2.png',
      '/static/img/click-guide.png',
      '/static/img/static.png',
      '/static/img/index-title.png',
      '/static/img/left-pillar.png',
      '/static/img/logo.png',
      '/static/img/news1.jpg',
      '/static/img/news2.jpg',
      '/static/img/news2-2.jpg',
      '/static/img/news3.jpg',
      '/static/img/news3-2.jpg',
      '/static/img/page-1.png',
      '/static/img/right-pillar.png',
      '/static/img/side-flower.png',
      '/static/img/title1.png',
      '/static/img/title2.png',
      '/static/img/title3.png',
      '/static/img/top-flower.png',
      '/static/img/tw-bg.png',

      '/static/img/data-avatar-1.png',
      '/static/img/data-avatar-2.png',
      '/static/img/data-course.png',
      '/static/img/data-stat-1.png',
      '/static/img/data-stat-2.png',
      '/static/img/data-stat-3.png',
      '/static/img/data-stat-4.png',
      '/static/img/data-title-1.png',
      '/static/img/data-title-2.png',
      '/static/img/title-review.png', */
    ];

    // 预加载
    function loadImage(arr, callbacks) {
      const loaded = [];
      function handler(url) {
        loaded.push(url);
        if (arr.length <= loaded.length) callbacks.all();
        else callbacks.each(loaded);
      }
      arr.forEach((url) => {
        const img = new Image();
        img.src = url;
        if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
          handler(url);
          return;
        }
        img.onload = () => {
          handler(url);
        };
      });
    }

    loadImage(images, {
      each(arr) {
        p.percent = parseInt((arr.length / images.length) * 100, 10);
      },
      all() {
        p.percent = 100;
        setTimeout(() => { p.loading = false; }, 100);
      },
    });
  },
  methods: {
    toggleLoading(forceStatus) {
      this.loading = typeof forceStatus === 'boolean' ? forceStatus : !this.loading;
    },
  },
};
</script>

<style>
.common-loading {
  padding-top: 40%;
}

.loader {
  width: 30px;
  height: 30px;

  position: relative;
  margin: 50px auto 10px auto;
}

.loader-title {
  text-align: center;
  font-size: 14px;
  color: #B5717D;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #B5717D;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
</style>